<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"	
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
	
	<h:form prependId="false">	

		<p:tabView id="reportview" dynamic="true" scrollable="true" style="width:800px">
			<p:tab title="Quantificação" >
				<h:panelGrid columns="5" cellspacing="5">
		
					<h:outputText value="Modalidade: "/>
					<p:selectOneMenu  value="#{reportBean.modalityString}" style="width:150px"  >
						<f:selectItem itemLabel="Selecione" 	itemValue="Selecione" />
						<f:selectItem itemLabel="Natação" 		itemValue="Natação"/>
						<f:selectItem itemLabel="Musculação" 	itemValue="Musculação"/>
						<f:selectItem itemLabel="Corrida" 		itemValue="Corrida"/>
					</p:selectOneMenu>  
					
					<h:outputText value="Período: "/>
					<p:selectOneMenu  value="#{reportBean.modalityString}" style="width:150px"  >
						<f:selectItem itemLabel="Selecione" 		itemValue="Selecione" />
						<f:selectItem itemLabel="MacroCiclo" 		itemValue="MacroCiclo"/>
						<f:selectItem itemLabel="MesoCiclo" 		itemValue="MesoCiclo"/>
						<f:selectItem itemLabel="Microciclo" 		itemValue="Microciclo"/>
					</p:selectOneMenu>  
		
					<p:selectCheckboxMenu value="#{reportBean.selExercises}" label="Exercícios" filter="true" filterText="Filtro" filterMatchMode="startsWith" panelStyle="width:220px">  
						<f:selectItems value="#{reportBean.exercises}" var="exercise" itemLabel="#{exercise.name}" />  
				    </p:selectCheckboxMenu>  
				
				</h:panelGrid>
				
			    <p:remoteCommand name="treeToTable" actionListener="#{reportBean.treeToTable}" update="tree cars " oncomplete="initRepDND()"/>
			    <p:remoteCommand name="tableToTree" actionListener="#{reportBean.tableToTree}" update="tree cars " oncomplete="initRepDND()"/>
		
			    <p:remoteCommand name="treeToTable2" actionListener="#{report2Bean.treeToTable}" update="tree2 cars2 " oncomplete="initRep2DND()"/>
			    <p:remoteCommand name="tableToTree2" actionListener="#{report2Bean.tableToTree}" update="tree2 cars2 " oncomplete="initRep2DND()"/>	  
		
			  	<h:panelGrid columns="3" cellspacing="5" columnClasses="top-align,top-align" style="border:solid 1px" >
			
				    <p:tree id="tree" value="#{reportBean.availableColumns}" var="column" style="border:none;width:150px">  
				        <p:treeNode>  
				            <h:outputText value="#{column}" />  
				        </p:treeNode>  
				  
				        <p:treeNode type="column" icon="ui-icon-grip-dotted-vertical">  
				            <h:outputText value="#{column.property}" />  
				        </p:treeNode>  
				    </p:tree>  
				    
				    <p:dataTable id="cars" var="report" value="#{reportBean.reports}">                      
				  		<p:column headerText="Data" >
							<h:outputText value="#{report.data}">
								<f:convertDateTime locale="pt" dateStyle="long" pattern="dd/MM/yyyy" />
							</h:outputText>
				  		</p:column>
				        <p:columns value="#{reportBean.columns}" var="column">  
				            <f:facet name="header">  
				                    <h:outputText style="float:left;display:block;height:12px;width:10px;border:0 none;" styleClass="droppoint dropleft" />                             
				                    <h:outputText style="float:right;display:block;height:12px;width:10px;border:0 none;" styleClass="droppoint dropright" />  
				                    <h:outputText value="#{column.header}" />  
				            </f:facet>  
							<h:outputText value="#{report[column.property]}" />  
				        </p:columns>  
				    </p:dataTable>  	    
		 	  	</h:panelGrid>
		
				<p:spacer width="1" height="5"/>
		
			  	<h:panelGrid columns="3" cellspacing="5" columnClasses="top-align,top-align" style="border:solid 1px" >
				    <p:tree id="tree2" value="#{report2Bean.availableColumns}" var="column" style="border:none;width:150px">  
				        <p:treeNode>  
				            <h:outputText value="#{column}" />  
				        </p:treeNode>  
				  
				        <p:treeNode type="column" icon="ui-icon-grip-dotted-vertical">  
				            <h:outputText value="#{column.property}" />  
				        </p:treeNode>  
				    </p:tree>  
				    
				    <p:dataTable id="cars2" var="zone" value="#{report2Bean.zones}">                      
				  		<p:column headerText="Zona" >
							<h:outputText value="#{zone.nome}"/>
				  		</p:column>
				        <p:columns value="#{report2Bean.columns}" var="column">  
				            <f:facet name="header">  
				                    <h:outputText style="float:left;display:block;height:12px;width:10px;border:0 none;" styleClass="droppoint dropleft" />                             
				                    <h:outputText style="float:right;display:block;height:12px;width:10px;border:0 none;" styleClass="droppoint dropright" />  
				                    <h:outputText value="#{column.header}" />  
				            </f:facet>  
							<h:outputText value="#{zone[column.property]}" />  
				        </p:columns>  
				    </p:dataTable>  	    
		
					<h:panelGrid columns="1" cellspacing="5">
		
						<p:lineChart value="#{reportBean.cycleGraphic}" legendPosition="e" animate="true" 
								 minY="0" maxY="50"  style="height:200px;width:400px;margin-left:50px" minX="0" maxX="7" />	
					</h:panelGrid>
			  	</h:panelGrid>			
			</p:tab>				
			<p:tab title="Métricas" >
				<h:panelGrid columns="2" columnClasses="top-align,top-align">
					<h:panelGrid columns="2" cellspacing="5">
					
						<p:selectCheckboxMenu value="#{reportBean.selExercises}" label="Exercícios" filter="true" filterText="Filtro" filterMatchMode="startsWith" panelStyle="width:220px">  
							<f:selectItems value="#{reportBean.exercises}" var="exercise" itemLabel="#{exercise.name}" />  
					    </p:selectCheckboxMenu>  
							
						<p:spacer width="1" height="1"/>	
			
						<h:outputText value="Modalidade: "/>
						<p:selectOneMenu  value="#{reportBean.modalityString}" style="width:150px"  >
							<f:selectItem itemLabel="Selecione" 	itemValue="Selecione" />
							<f:selectItem itemLabel="Natação" 		itemValue="Natação"/>
							<f:selectItem itemLabel="Musculação" 	itemValue="Musculação"/>
							<f:selectItem itemLabel="Corrida" 		itemValue="Corrida"/>
						</p:selectOneMenu>  
						
						<h:outputText value="Período: "/>
						<p:selectOneMenu  value="#{reportBean.modalityString}" style="width:150px"  >
							<f:selectItem itemLabel="Selecione" 		itemValue="Selecione" />
							<f:selectItem itemLabel="MacroCiclo" 		itemValue="MacroCiclo"/>
							<f:selectItem itemLabel="MesoCiclo" 		itemValue="MesoCiclo"/>
							<f:selectItem itemLabel="Microciclo" 		itemValue="Microciclo"/>
						</p:selectOneMenu>  
	
						<h:outputText value="Métrica: "/>
						<p:selectOneMenu  value="#{reportBean.modalityString}" style="width:150px"  >
							<f:selectItem itemLabel="Selecione" 		itemValue="Selecione" />
							<f:selectItem itemLabel="cargaTreino" 		itemValue="cargaTreino"/>
							<f:selectItem itemLabel="deltaVolume" 		itemValue="deltaVolume"/>
							<f:selectItem itemLabel="intensidade" 		itemValue="intensidade"/>
							<f:selectItem itemLabel="mediaVolume" 		itemValue="mediaVolume"/>
							<f:selectItem itemLabel="monotonia" 		itemValue="monotonia"/>
							<f:selectItem itemLabel="strain" 			itemValue="strain"/>
							<f:selectItem itemLabel="volume" 			itemValue="volume"/>
						</p:selectOneMenu> 
					    
   					    <p:commandButton type="button" value="Adicionar" icon="ui-icon-plus"/>
					</h:panelGrid>			
					<p:outputPanel layout="block">			
						<p:panel header="Volume" closable="true" > 
							<p:lineChart value="#{reportBean.volumeGraphic}" legendPosition="e" animate="true" lazy="true"
									 minY="0" maxY="50"  style="height:200px;width:400px;margin-left:50px" minX="0" maxX="7" />						
						</p:panel>	
	
						<p:panel header="Strain" closable="true">  
							<p:lineChart value="#{reportBean.strainGraphic}" legendPosition="e" animate="true" lazy="true"
									 minY="0" maxY="50"  style="height:200px;width:400px;margin-left:50px" minX="0" maxX="7" />						
						</p:panel>	
						
						<p:panel header="Monotonia" closable="true"> 
							<p:lineChart value="#{reportBean.monotoniaGraphic}" legendPosition="e" animate="true" lazy="true"
									 minY="0" maxY="50"  style="height:200px;width:400px;margin-left:50px" minX="0" maxX="7" />						
						</p:panel>					
					</p:outputPanel>
				</h:panelGrid>	
				
			</p:tab>
			<p:tab title="Índices" >
				<h:panelGrid columns="2"  columnClasses="top-align,top-align">
					<h:panelGrid columns="2" cellspacing="5">
			
						<p:selectCheckboxMenu value="#{reportBean.selExercises}" label="Exercícios" filter="true" filterText="Filtro" filterMatchMode="startsWith" panelStyle="width:220px">  
							<f:selectItems value="#{reportBean.exercises}" var="exercise" itemLabel="#{exercise.name}" />  
					    </p:selectCheckboxMenu>  

						<p:spacer width="1" height="1"/>	
			
			
						<h:outputText value="Modalidade: "/>
						<p:selectOneMenu  value="#{reportBean.modalityString}" style="width:150px"  >
							<f:selectItem itemLabel="Selecione" 	itemValue="Selecione" />
							<f:selectItem itemLabel="Natação" 		itemValue="Natação"/>
							<f:selectItem itemLabel="Musculação" 	itemValue="Musculação"/>
							<f:selectItem itemLabel="Corrida" 		itemValue="Corrida"/>
						</p:selectOneMenu>  
						
						<h:outputText value="Período: "/>
						<p:selectOneMenu  value="#{reportBean.modalityString}" style="width:150px"  >
							<f:selectItem itemLabel="Selecione" 		itemValue="Selecione" />
							<f:selectItem itemLabel="MacroCiclo" 		itemValue="MacroCiclo"/>
							<f:selectItem itemLabel="MesoCiclo" 		itemValue="MesoCiclo"/>
							<f:selectItem itemLabel="Microciclo" 		itemValue="Microciclo"/>
						</p:selectOneMenu>  
	
						<h:outputText value="Métrica: "/>
						<p:selectOneMenu  value="#{reportBean.modalityString}" style="width:150px"  >
							<f:selectItem itemLabel="Selecione" 	itemValue="Selecione" />
							<f:selectItem itemLabel="lactato" 		itemValue="lactato"/>
							<f:selectItem itemLabel="fr" 			itemValue="fr"/>
							<f:selectItem itemLabel="ve" 			itemValue="ve"/>
							<f:selectItem itemLabel="vo2" 			itemValue="vo2"/>
							<f:selectItem itemLabel="fc" 			itemValue="fc"/>
						</p:selectOneMenu> 

					    <p:commandButton type="button" value="Adicionar" icon="ui-icon-plus"/>
					</h:panelGrid>				

					<p:outputPanel autoUpdate="true" layout="block">						
						<p:panel header="VO2" closable="true" > 
							<p:lineChart value="#{reportBean.vo2Graphic}" legendPosition="e" animate="true" lazy="true"
									 minY="0" maxY="50"  style="height:200px;width:400px;margin-left:50px" minX="0" maxX="7" />						
						</p:panel>	
	
						<p:panel header="FC" closable="true">  
							<p:lineChart value="#{reportBean.fcGraphic}" legendPosition="e" animate="true" lazy="true"
									 minY="0" maxY="50"  style="height:200px;width:400px;margin-left:50px" minX="0" maxX="7" />						
						</p:panel>	
						
						<p:panel header="Lactato" closable="true"> 
							<p:lineChart value="#{reportBean.lactatoGraphic}" legendPosition="e" animate="true" lazy="true"
									 minY="0" maxY="50"  style="height:200px;width:400px;margin-left:50px" minX="0" maxX="7" />						
						</p:panel>	
					</p:outputPanel>				
				</h:panelGrid>				
			</p:tab>
		</p:tabView>

    <script type="text/javascript">  
	    
	        function initRep2DND() {  
	            $('#reportview\\:tree2 .ui-treenode-leaf').draggable({  
	               helper: 'clone',  
	               scope: 'treetotable2',  
	               zIndex: ++PrimeFaces.zindex  
	            });  
	  
	            $('#reportview\\:cars2 .droppoint').droppable({  
	               activeClass: 'ui-state-active',  
	               hoverClass: 'ui-state-highlight',  
	               tolerance: 'pointer',  
	               scope: 'treetotable2',  
	               drop: function(event, ui) {  
	                   var property = ui.draggable.find('.ui-treenode-label').text(),  
	                   droppedColumnId = $(this).parents('th:first').attr('id'),  
	                   dropPos = $(this).hasClass('dropleft') ? 0 : 1;  
	  
	                   treeToTable2([  
	                        {name: 'property', value:  property}  
	                       ,{name: 'droppedColumnId', value: droppedColumnId}  
	                       ,{name: 'dropPos', value: dropPos}  
	                   ]);  
	               }  
	            });  
	  
	            $('#reportview\\:cars2 th').draggable({  
	               helper: 'clone',  
	               scope: 'tabletotree2',  
	               helper: function() {  
	                   var th = $(this);  
	  
	                   return th.clone().css('width', th.width());  
	               }  
	            });  
	  
	            $('#reportview\\:tree2').droppable({  
	               helper: 'clone',  
	               scope: 'tabletotree2',  
	               activeClass: 'ui-state-active',  
	               hoverClass: 'ui-state-highlight',  
	               tolerance: 'touch',  
	               drop: function(event, ui) {                                 
	                   tableToTree([  
	                       {name: 'colIndex', value:  ui.draggable.index()}  
	                   ]);  
	               }  
	            });  
	        }  
	  
	        function initRepDND() {  
	            $('#reportview\\:tree  .ui-treenode-leaf').draggable({  
	               helper: 'clone',  
	               scope: 'treetotable',  
	               zIndex: ++PrimeFaces.zindex  
	            });  
	  
	            $('#reportview\\:cars .droppoint').droppable({  
	               activeClass: 'ui-state-active',  
	               hoverClass: 'ui-state-highlight',  
	               tolerance: 'pointer',  
	               scope: 'treetotable',  
	               drop: function(event, ui) {  
	                   var property = ui.draggable.find('.ui-treenode-label').text(),  
	                   droppedColumnId = $(this).parents('th:first').attr('id'),  
	                   dropPos = $(this).hasClass('dropleft') ? 0 : 1;  
	  
	                   treeToTable([  
	                        {name: 'property', value:  property}  
	                       ,{name: 'droppedColumnId', value: droppedColumnId}  
	                       ,{name: 'dropPos', value: dropPos}  
	                   ]);  
	               }  
	            });  
	  
	            $('#reportview\\:cars th').draggable({  
	               helper: 'clone',  
	               scope: 'tabletotree',  
	               helper: function() {  
	                   var th = $(this);  
	  
	                   return th.clone().css('width', th.width());  
	               }  
	            });  
	  
	            $('#reportview\\:tree').droppable({  
	               helper: 'clone',  
	               scope: 'tabletotree',  
	               activeClass: 'ui-state-active',  
	               hoverClass: 'ui-state-highlight',  
	               tolerance: 'touch',  
	               drop: function(event, ui) {                                 
	                   tableToTree([  
	                       {name: 'colIndex', value:  ui.draggable.index()}  
	                   ]);  
	               }  
	            });  
	        }  
	  
	        $(function() {  
	            initRepDND();  
	            initRep2DND();  
	        });  
	    </script>  

	</h:form>	
</html>